<!-- sign_in -->
<template>
  <div class="container b-container" id="b-container">
    <form class="form" id="b-form" method="" action="">
      <h2 class="form_title title">Sign in to Website</h2>
      <div class="form__icons">
        <img class="form__icon" src=" " />
        <img class="form__icon" src=" " />
        <img class="form__icon" src=" " />
      </div>
      <span class="form__span">or use your email account</span>
      <input
        class="form__input"
        type="text"
        placeholder="用户名"
        v-model="loginFrom.username"
      />
      <input
        class="form__input"
        type="password"
        placeholder="密码"
        v-model.lazy="loginFrom.password"
      />
      <a class="form__link">Forgot your password?</a>
      <button class="form__button button submit">SIGN IN</button>
    </form>
  </div>
</template>
<style scoped lang="scss">
@import "./login.scss";
/* 将源码中的css样式单独存放,在各组件中导入就可以。*/
</style>

<script setup>
import { ref, onMounted } from "vue";
import useEmitter from "../../hooks/useEmitter.js";

const isOpen  = ref(true)
const emitter = useEmitter();
console.log(emitter)
onMounted(() => {
  emitter.on("change", (isOpen) => {
    watch: {
      isOpen: {
        // let aContainer = document.querySelector("#a-container");
        // aContainer.classList.toggle("is-txl");

        //b中样式
        let bContainer = document.querySelector("#b-container");
        bContainer.classList.toggle("is-txl");
        bContainer.classList.toggle("is-z200");
      }
    }
  });
});
const loginFrom = ref({
  username: "",
  loginFrom: "",
});
</script>
